# CSS Sprites

# CSS Sprites 简介

CSS Sprites : CSS 精灵，CSS 图片整合技术，CSS 雪碧

定义 ∶ 将导航背景图片，按钮背景图片等有规则的合并成一张背景图，即将多张图片合为一张整图，然后用 background-position 来实现背景图片的定位技术。

# 为什么需要 CSS Sprites

• 减少了 HTTP 请求的次数，减轻服务器的负载
• 提高网页加载速度，提升网站性能
• css Sprites 并不是一门新技术，目前它已经在网页开发中发展得较为成熟

# CSS Sprites 缺点

• 在开发时需要通过 photoshop(PS)或其他工具测量计算每一个背景单元的精确位置。
• 在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，你需要考虑当前盒子会不会漏出其他的背景图，要留好只够的空间，防止板块内不会出现不必要的背景，如果留空间或拼合位置不合适，在布局时容易出现背景出现拼合相邻图片，干扰图片的情况。
• 维护比较麻烦，如果页面背景有少许改动（更换某个图标），一般就要改这张合并的图片。无需改的地方最好不要动，这样避免改动更多的 css，如果在原来的地方放不下，最好在图片上增加图片不要删除原来的图片，这样图片的字节就增加了，因为每次的图片改动都得往这个图片删除或添加内容，显得稍微繁琐，而且需要重新计算图片的位置。所以一旦需要更改背景图的话，轻易不要改变其他图片的位置，原位能放下就在原位改，放不下就在下面添加。
• 由于图片的位置需要固定为某个绝对数值，这就失去了诸如 center 之类的灵活性。

# CSS Sprites 图片整合原则

• 边切图边整合，定位时避免使用 bottom,right 等，用具体的数值，为了避免当你的宽度或高度上扩展 sprites 图时出现位置的错误。
• 将小图标预留足够的空间，因为使用这些图标元素通常会有大量的内容而且可能需要扩展的间距，以至于其它的图片可能会意外出现在本区域内。一般的情况下，会将这些小图标整合到文件的最右侧。
• 单张整合好的 sprite 图片在 100KB 以内。
• 按分类整合图片。
• 为了方便计算尺寸，一般情况会将 sprites 图的坐标计算成整数倍。

CSS Sprites 生成工具open in new window